<template>
  <div>
    <el-card class="box-card">
      <el-row :gutter="8"
              type="flex"
              align="middle">
        <el-col :span="1.5">
          菜单名称
        </el-col>
        <el-col :span="3">
          <el-input v-model='getParams.menuName'
                    placeholder="请输入分类名字"></el-input>
        </el-col>
        <el-col :span="1.5">
          状态
        </el-col>
        <el-col :span="3">
          <el-select placeholder="请选择"
                     v-model="getParams.status">
            <el-option label="正常"
                       :value="0">
            </el-option>
            <el-option label="停用"
                       :value="1">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="1.5">
          <el-button type="primary"
                     icon="el-icon-search"
                     @click="getTableList()">搜索</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button @click="refreshTable"
                     icon='el-icon-refresh'>重置</el-button>
        </el-col>
      </el-row>
      <div class="btnList">
        <el-row :gutter="8"
                type="flex"
                align="middle"
                class="btn_nav">
          <el-col :span="1.5">
            <el-button size="mini"
                       type="primary"
                       icon="el-icon-plus"
                       plain
                       @click="addXqq">新增</el-button>
          </el-col>

        </el-row>

        <el-row :gutter="8"
                type="flex"
                align="middle"
                class="btn_nav">

          <el-col :span="1.5">
            <el-button size="mini"
                       icon="el-icon-search"
                       circle></el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button @click="refreshTable"
                       size="mini"
                       icon="el-icon-refresh"
                       circle></el-button>
          </el-col>
        </el-row>
      </div>

      <!--  -->
      <el-table :data="menuList"
                v-loading="loading"
                style="width: 100%"
                :header-cell-style="{background:'#f8f8f9'}"
                row-key="menuId"
                :default-expand-all="false"
                :tree-props="{children:'children', hasChildren:'hasChildren'}">

        <el-table-column prop="menuName"
                         label="菜单名称"
                         width="180">
        </el-table-column>
        <el-table-column prop="icon"
                         label="图标"
                         width="180">
          <template slot-scope="scope">
            <span :class="'iconfont icon-'+scope.row.icon"></span>
          </template>
        </el-table-column>
        <el-table-column prop="orderNum"
                         label="排序">
        </el-table-column>
        <el-table-column prop="perms"
                         label="权限标识">
        </el-table-column>
        <el-table-column prop="component"
                         label="组件路径">
        </el-table-column>
        <el-table-column prop="status"
                         label="状态">
          <template slot-scope="scope">
            <span>{{scope.row.status==0?'正常':'停用'}}</span>
          </template>

        </el-table-column>
        <el-table-column prop="createTime"
                         label="创建时间">
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="data">
            <el-button icon="el-icon-edit"
                       type="text"
                       @click="updateHandler(data.row.menuId)">修改</el-button>
            <el-button icon="el-icon-plus"
                       type="text"
                       @click="add(data.row)">新增</el-button>
            <el-button icon="el-icon-delete"
                       type="text"
                       @click="deleteHandler(data.row)">删除</el-button>
          </template>

        </el-table-column>
      </el-table>

    </el-card>

    <div>
      <el-dialog :title="tip?'添加菜单':'修改菜单'"
                 @closed="closed"
                 :visible.sync="dialogVisible"
                 width="40%">
        <el-form :model="formData"
                 ref="ruleForm"
                 label-width="80px">
          <el-form-item label="上级菜单"
                        prop="name">
            <el-select v-model="form.menuId"
                       :filter-method="remoteMethod"
                       filterable
                       size="small"
                       style="width:100%"
                       placeholder="请选择"
                       ref="selectTree">
              <el-option :label="form.value"
                         :value="form.menuId"
                         hidden>
              </el-option>
              <el-tree :data="treeList"
                       :props="defaultProps"
                       node-key="menuId"
                       accordion
                       ref="tree"
                       :filter-node-method="filterNode"
                       highlight-current
                       @node-click="handleNodeClick" />
              <!-- <el-option :label="form.value"
                         style="height: auto"
                         :value="form.menuId">
                <el-tree ref="tree"
                         :data="treeList"
                         :props="defaultProps"
                         node-key="menuId"
                         accordion
                         :filter-node-method="filterNode"
                         highlight-current
                         @node-click="handleNodeClick" />
              </el-option> -->
            </el-select>
          </el-form-item>
          <el-form-item label="菜单类型">
            <template>
              <el-radio v-model="formData.menuType"
                        label="M">目录</el-radio>
              <el-radio v-model="formData.menuType"
                        label="C">菜单</el-radio>
              <el-radio v-model="formData.menuType"
                        label="F">按钮</el-radio>
            </template>
          </el-form-item>
          <el-form-item v-if="formData.menuType!='F'"
                        label="菜单图标">
            <!-- <e-icon-picker v-model="icon" /> -->
            <e-icon-picker v-model="formData.icon"
                           :options="options"
                           :disabled="disabled"
                           :readonly="readonly"
                           :placement="placement"
                           :styles="style"
                           :width="width" />
          </el-form-item>
          <!--  -->
          <el-row style="display:flex">
            <el-col>
              <el-form-item label="菜单名称"
                            prop="postCode">
                <el-input v-model="formData.menuName"
                          placeholder="请输入菜单名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item prop="postSort"
                            label="显示顺序">
                <el-input-number v-model="formData.orderNum"
                                 controls-position="right"
                                 :min="0"
                                 :max="10000000"></el-input-number>
              </el-form-item>
            </el-col>

          </el-row>
          <!--  -->
          <el-row v-if="formData.menuType!='F'"
                  style="display:flex">
            <el-col>
              <el-form-item label="是否外链"
                            prop="postCode">
                <template>
                  <el-radio v-model="formData.isFrame"
                            label="0">是</el-radio>
                  <el-radio v-model="formData.isFrame"
                            label="1">否</el-radio>
                </template>
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item prop="postSort"
                            label="路由地址">
                <el-input v-model="formData.path"
                          placeholder="路由地址"></el-input>
              </el-form-item>
            </el-col>

          </el-row>
          <el-row v-if="formData.menuType!='M'"
                  style="display:flex">
            <el-col v-if="formData.menuType!='F'">
              <el-form-item label="组件路径"
                            prop="postCode">
                <el-input v-model="formData.component"
                          placeholder="请输入组件路径"></el-input>
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item label="权限标识"
                            prop="postCode">
                <el-input v-model="formData.perms"
                          placeholder="权限标识"></el-input>
              </el-form-item>

            </el-col>

          </el-row>
          <!--  -->
          <el-row v-if="formData.menuType!='F'"
                  style="display:flex">
            <el-col>
              <el-form-item label="显示状态"
                            prop="postCode">
                <template>
                  <el-radio v-model="formData.visible"
                            label="0">显示</el-radio>
                  <el-radio v-model="formData.visible"
                            label="1">隐藏</el-radio>
                </template>
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item prop="postSort"
                            label="菜单状态">
                <template>
                  <el-radio v-model="formData.status"
                            label="0">正常</el-radio>
                  <el-radio v-model="formData.status"
                            label="1">停用</el-radio>
                </template>
              </el-form-item>
            </el-col>

          </el-row>
          <el-form-item v-if="formData.menuType=='C'"
                        prop="postSort"
                        label="是否缓存">
            <template>
              <el-radio v-model="formData.isCache"
                        label="0">缓存</el-radio>
              <el-radio v-model="formData.isCache"
                        label="1">不缓存</el-radio>
            </template>
          </el-form-item>
        </el-form>
        <span slot="footer"
              class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary"
                     @click="addXqqType">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import quillEditor from '../../../components/Quill'
// import { quillEditor } from 'vue-quill-editor'
export default {
  components: { quillEditor },
  data() {
    return {
      arr: [],
      // 配置图标
      options: { FontAwesome: false, ElementUI: true, addIconList: [], removeIconList: [] },
      disabled: false,
      readonly: false,
      placement: 'bottom',
      style: {},
      width: 400,
      icon: '',
      formData: {
        children: [],
        component: null,
        createBy: null,
        createTime: null,
        icon: null,
        isCache: '0',
        isFrame: '1',
        menuId: null,
        menuName: null,
        menuType: 'M',
        orderNum: null,
        params: {},
        parentId: null,
        parentName: null,
        path: null,
        perms: null,
        remark: null,
        searchValue: null,
        status: '0',
        updateBy: null,
        updateTime: null,
        visible: null
      },
      getParams: {
        menuName: '',
        status: ''
      },
      form: {
        menuId: '',
        value: ''
      },

      filterText: '',
      treeList: [{ menuName: '主类目', menuId: 0, children: [] }],
      menuList: [],
      tip: true,
      // 选中的
      defaultProps: {
        children: 'children',
        label: 'menuName'
      },
      loading: true,
      dialogVisible: false,
      rules: {
        name: [{ required: true, message: '请输入分类名称', trigger: 'blur' }],
        gz: [{ required: true, message: '请输入信息', trigger: 'blur' }],
        ty: [{ required: true, message: '请输入信息', trigger: 'blur' }]
      }
    }
  },
  mounted() {
    this.loading = true
    this.getTableList()
  },
  methods: {
    updatadata() {
      this.tip = false
      this.updateHandler(this.checkItem[0].id)
    },

    deleteHandler(id) {
      this.$confirm(`是否确认删除菜单名称为${id.menuName.toString()}的数据项?`, '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          let data = await this.$axios.delete(`system/menu/${id.menuId.toString()}`)
          console.log(data)
          if (data.data.code != 200) return this.$message.error(data.data.msg)
          this.$message({
            type: 'success',
            message: data.data.msg
          })
          this.getTableList()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },

    //
    async updateHandler(id) {
      this.tip = false
      let { data } = await this.$axios.get(`system/menu/${id}`)
      let { data: res } = await this.$axios.get('system/menu/list')
      // this.treeList =
      this.treeList[0].children = this.getChildren(res.data, 0)
      this.arr = res.data

      if (data.data.parentId != 0) {
        let obj = this.arr.filter((el) => el.menuId == data.data.parentId)
        this.form.menuId = obj[0].menuId
        this.form.value = obj[0].menuName
      } else {
        this.form.menuId = 0
        this.form.value = '主菜单'
      }

      this.formData = data.data
      this.dialogVisible = true
    },
    // close
    closed() {
      this.formData = {
        children: [],
        component: null,
        createBy: null,
        createTime: null,
        icon: null,
        isCache: '0',
        isFrame: '1',
        menuId: null,
        menuName: null,
        menuType: 'M',
        orderNum: null,
        params: {},
        parentId: null,
        parentName: null,
        path: null,
        perms: null,
        remark: null,
        searchValue: null,
        status: '0',
        updateBy: null,
        updateTime: null,
        visible: null
      }
    },

    async addXqqType() {
      let data = null
      this.formData.parentId = this.form.menuId
      if (!this.formData.menuId) {
        data = await this.$axios.post('system/menu', this.formData)
      } else {
        data = await this.$axios.put('system/menu', this.formData)
      }
      if (data.data.code != 200) return this.$message.error(data.data.msg)
      this.$message({
        message: data.data.msg,
        type: 'success'
      })
      this.dialogVisible = false
      this.getTableList()
      this.closed()
    },

    // 下拉

    handleNodeClick(data) {
      this.form = {
        menuId: data.menuId,
        value: data.menuName
      }
      // 使 input 失去焦点，并隐藏下拉框
      this.$refs.selectTree.blur()
    },
    remoteMethod(val) {
      this.$refs.tree.filter(val)
    },
    async add(data) {
      this.tip = true
      let { data: res } = await this.$axios.get('system/menu/list')
      // this.treeList =
      this.treeList[0].children = this.getChildren(res.data, 0)
      this.arr = res.data

      this.form.menuId = data.menuId
      this.form.value = data.menuName

      this.dialogVisible = true
    },
    async addXqq() {
      this.tip = true
      this.dialogVisible = true
      let { data } = await this.$axios.get('system/menu/list')
      // this.treeList =
      this.treeList[0].children = this.getChildren(data.data, 0)
      this.form.menuId = 0
      this.form.value = '主菜单'
    },
    getChildren(list, rootValue) {
      let arr = []
      list.forEach((item) => {
        if (item.parentId === rootValue) {
          const children = this.getChildren(list, item.menuId) // 找到之后 就要去找 item 下面有没有子节点
          if (children.length) {
            item.children = children // 如果children的长度大于0 说明找到了子节点
          }
          arr.push(item) // 将内容加入到数组中
        }
      })
      return arr // 返回新数组
    },

    // 刷新
    refreshTable() {
      this.getParams = { menuName: '', status: '' }
      this.getTableList()
    },
    async getTableList() {
      this.loading = true
      this.menuList = []
      let { data } = await this.$axios.get('system/menu/list', { params: this.getParams })
      this.arr = data.data
      this.menuList = this.getChildren(data.data, 0)
      this.loading = false
    },
    // 过滤

    filterNode(value, data) {
      if (!value) return true
      return data.menuName.indexOf(value) !== -1
    }
  },
  watch: {}
}
</script>

<style lang="scss" scoped>
.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}
.clearfix:after {
  clear: both;
}

.el-card__body {
  padding: 10px;
  padding-top: 20px;
  .btnList {
    margin-bottom: 8px;
    margin-top: 15px;
    display: flex;
    justify-content: space-between;
  }
  .page {
    margin-top: 15px;
    display: flex;
    justify-content: flex-end;
  }
}
</style>